<main>
    <Topbar></Topbar>

    <section>
        <h2 class="custom-title">手机号注册</h2>
        <van-form @submit="onSubmit">
            <van-field 
                v-model="phone" 
                name="username"
                label="手机号" 
                placeholder="手机号" 
                maxlength="11" 
                :formatter="formatter"
                clearable
                :error-message="errorPhoneTxt"
                :rules="[{ required: true, message: '请填写手机号' }]"
                @blur="validateNumber()"
                autocomplete="off"
            />
            <van-field 
                v-model="password" 
                :type="passwordType" 
                name="password" 
                label="密码"
                placeholder="密码" 
                maxlength="6"
                autocomplete="off"
                :error-message="errorPasswordTxt"
                :rules="[{ required: true, message: '请填写密码' }]" >
                <template slot="right-icon">
                    <span class="solts" @click="switchPasswordType">
                        <van-icon name="eye" v-if="passwordType==='password'" />
                        <van-icon name="closed-eye" v-else />
                    </span>
                </template>
            </van-field>
            <div class="custom-button">
                <van-button block type="danger" native-type="submit">注册</van-button>
            </div>
        </van-form>
    </section>

</main>